// src/views/data/ECharts.tsx
import { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Row, Col, Button } from 'antd'
import { getData } from '../../api/data';
interface IEChartsProps { }

const ECharts: FC<IEChartsProps> = () => {
    // 图表展示基础数据
    const [data, setData] = useState([5, 20, 36, 10, 10, 20])
    // 修改数据
    const changeData = () => {
        const arr = [5, 20, 36, 10, 10, 20]
        const newArr: number[] = []
        arr.forEach(item => {
            newArr.push(item + Math.floor(100 + Math.random() * 100))
        })
        setData(newArr)
    }
    // 渲染 echarts 柱状图
    useEffect(() => {
        var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
        const option = {
            title: {
                text: '柱状图'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            series: [
                {
                    name: '销量',
                    type: 'bar',
                    data
                },
                {
                    name: '业绩',
                    type: 'bar',
                    data: [20, 36, 10, 10, 20, 60]
                }
            ]
        }
        myBarChart.setOption(option)
    }, [data])
    // 渲染 折线图
    useEffect(() => {
        var myLineChart = echarts.init(document.getElementById('lineCharts') as HTMLDivElement);
        const option = {
            title: {
                text: '折线图'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data
                }
            ]
        }
        myLineChart.setOption(option)
    }, [data])
    // 饼状图
    useEffect(() => {
        var myPieChart = echarts.init(document.getElementById('pieECharts') as HTMLDivElement);
        const option = {
            title: {
                text: '饼状图'
            },
            tooltip: {},
            xAxis: {
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'pie',
                    data
                }
            ]
        }
        myPieChart.setOption(option)
    }, [data])

    // 基于 接口返回的数据渲染饼状图
    const [dbData, setDbData] = useState([])
    const getSdata = async () => {
        const res = await getData()
        // 这里我们对数据进行了重新设置以后，那么监听的依赖 dbData 就会造成无限死循环
        setDbData(res.data.data)
    }
    // 这里一定要注意：我们 gerSdata 会修改 dbData，所以，需要初始化的时候调用即可
    useEffect(() => {
        getSdata()
    }, [])

    useEffect(() => {
        var mydbECharts = echarts.init(document.getElementById('dbECharts') as HTMLDivElement)
        const xAxisArr: string[] = []
        const dataArr: number[] = []
        dbData.forEach((item: { x: string, val: number }) => {
            xAxisArr.push(item.x)
            dataArr.push(item.val)
        })
        const option = {
            title: {
                text: '饼状图'
            },
            tooltip: {},
            xAxis: {
                data: xAxisArr
            },
            yAxis: {},
            series: [
                {
                    name: '销量',
                    type: 'line',
                    data: dataArr
                }
            ]
        }
        mydbECharts.setOption(option)
        window.addEventListener('resize', () => {
            mydbECharts && mydbECharts.resize();
        })
    }, [dbData])

    return (
        <>
            <div><Button onClick={changeData}>切换数据</Button></div>
            <Row gutter={30}>
                <Col span={8}>
                    <div id="barECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
                </Col>
                <Col span={8}>
                    <div id="lineCharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
                </Col>
            </Row>
            <Row gutter={30}>
                <Col span={8}>
                    <div id="pieECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
                </Col>
                <Col span={8}>
                    <div id="dbECharts" style={{ width: 400, height: 300, backgroundColor: '#efefef', margin: '20px 0' }}></div>
                </Col>
            </Row>
        </>
    )
};
export default ECharts;